import React, {useContext} from "react";
import {BucketDetailContext} from "./context";
import {tparam} from "@kordar-lib/i18n";
import {getParentDirectory} from "./helper";

const TitlePanel = () => {

    const {pageConfig, ctx, ctxState, bucket, currentPath, setCurrentPath} = useContext(BucketDetailContext)

    const toBack = () => {
        let path = getParentDirectory(currentPath)
        setCurrentPath(path)
        if (bucket.driver === "cos") {
            let dir = path.replace(/^\//, '')
            if (dir === "/") {
                dir = ""
            }
            ctx.search({id: bucket.id, dir: dir})
        } else {
            ctx.search({id: bucket.id, dir: path})
        }

    }

    return (
        <div className="bucket-detail-title-panel">
            <div className="back">
                <b className="iconfont icon-logout2" onClick={toBack}> {tparam(pageConfig, "detail_back.text", "Back")}</b>
            </div>
            <div className="link">
                <b>{tparam(pageConfig, "detail_current_directory.text", "current directory")}:</b> {bucket?.name}{currentPath}
            </div>
        </div>
    )
}

export default TitlePanel
